<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
		  <el-form-item label="团号" prop="numbers">
		    <el-input v-model="queryParams.numbers" placeholder="请输入团号" clearable @keyup.enter.native="handleQuery"/>
		  </el-form-item>
		  <el-form-item label="线路名称" prop="lineNames">
		    <el-input v-model="queryParams.lineNames" placeholder="请输入线路名称" clearable @keyup.enter.native="handleQuery"/>
		  </el-form-item>
		 
		  <el-form-item label="抵达日期" prop="arriveDate">
		    <el-date-picker v-model="queryParams.arriveDate" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
		    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
					<!-- <el-date-picker  v-model="queryParams.arriveDate[0]"  type="date" value-format="yyyy-MM-dd HH:mm:ss"  placeholder="选择日期"></el-date-picker> -->								
		  </el-form-item>
	
		  <el-form-item>
		    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
		    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
		  </el-form-item>
		</el-form>
		<el-table ref="tableRef7"     v-loading="loading"    border   :data="list"  >
			<!-- <el-table-column  type="selection"  width="55"></el-table-column> -->
			<el-table-column label="团/散" align="center" prop="date8"  width="80"/>
			<el-table-column label="团号" align="center" prop="numbers"  width="180"/>
			<el-table-column label="线路名称" align="center" prop="lineNames"  width="240"/>
			<!-- <el-table-column label="办事处" align="center" prop="lineNames"  width="140"/> -->
			<el-table-column label="组团社" align="center" prop="blocks"  width="120"/>
			<el-table-column label="人数" align="center" prop="lineNames"  width="80">
				<template v-slot="scope">
					<span v-if="scope.row.guestAdult">{{ scope.row.guestAdult }}+{{ scope.row.guestChildren }}</span>
					<span v-else>0</span>
				</template>
			</el-table-column>
			<el-table-column label="客人" align="center" prop="guestName"  width="150">
				<template v-slot="scope">
					<span >{{ scope.row.guestName }}{{ scope.row.guestPhone }}</span>
				
				</template>
			</el-table-column>
			<el-table-column label="抵离日期" align="center" prop="lineNames"  width="150">
				<template v-slot="scope">
					<span>{{parseTime(scope.row.arriveDate,'{y}-{m}-{d}')  }}/{{ parseTime(scope.row.returnDate,'{m}-{d}') }} </span>
				</template>
			</el-table-column>
			<el-table-column label="收客团款" align="center" prop="date6"  width="100"/>
			<el-table-column label="地接团款" align="center" prop="date7"  width="100"/>
			<el-table-column label="录入时间" align="center" prop="createTime"  width="150">
				<template v-slot="scope">
					<span>{{parseTime(scope.row.createTime,'{y}-{m}-{d} {h}:{i}')}} </span>
				</template>
			</el-table-column>
			<el-table-column label="编辑" align="center" class-name="small-padding fixed-width" >
				<template v-slot="scope">
					<el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"
						v-hasPermi="['team:orde:update']">编辑</el-button>
				</template>
			</el-table-column>
			<el-table-column label="删除" align="center" class-name="small-padding fixed-width" >
				<template v-slot="scope">
					<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
						v-hasPermi="['team:orde:delete']">删除</el-button>
					 
				</template>
			</el-table-column>
		</el-table>	
		<!-- 对话框(添加 / 修改) -->
		<OrdeForm ref="formRef" @success="getList" />
		<!-- 添加车队和酒店(设置)-->
		<hotelAndHoteForm ref="formRef2" @success="getList" />
	</div>
</template>

<script>
	import moment from 'moment';
	import * as OrdeApi from '@/api/team/orde';
	import OrdeForm from './OrdeForm.vue';
	import hotelAndHoteForm from './hotelAndHoteForm.vue';
	export default {
	  name: "teamOrdeIndexOrdeDQ",
	  components: {
		    OrdeForm,hotelAndHoteForm
	  },
	  data() {
	    return {
			showTable:true,
	      // 遮罩层
	      loading: true,
	      // 导出遮罩层
	      exportLoading: false,
	      // 显示搜索条件
	      showSearch: true,
	        // 总条数
	       total: 0,
	      // 团队订单列表
	      list: [],
	      // 查询参数
	      queryParams: {
	        pageNo: 1,
	        pageSize: 10,
	        numbers: null,
	        blocksName: null,
	        arriveDate: [moment().subtract(3, 'day').format('YYYY-MM-DD HH:mm:ss'),],
	      },
		  spanArr:[]
	     };
	  },
	  mounted() {
	    
	  },
	  created() {
	    this.getList();
	  },
	  methods: {
	    /** 查询列表 */
	    async getList() {
	      try {
	  		this.loading = true;
	  		this.queryParams.arriveDate[1]=this.getDateAfter30Days(this.queryParams.arriveDate[0])
	  		console.log(this.queryParams);
	        const res = await OrdeApi.getOrdePage(this.queryParams);
	        this.list = res.data.list;
	        this.total = res.data.total;
	  		
	  	
	      } finally {
	        this.loading = false;
	      }
	    },
		//计算30天后的结束日期方法
		getDateAfter30Days(date) {
		    // 确保输入的是有效的日期字符串
		    if (!date) return null;
		    // 使用moment计算30天后的日期 
		    const thirtyDaysLater = moment(date).add(27, 'days').format('YYYY-MM-DD HH:mm:ss');
		    return thirtyDaysLater;
		},
	    /** 搜索按钮操作 */
	    handleQuery() {
	      this.queryParams.pageNo = 1;
	      this.getList();
	    },
		/** 添加/修改操作 */
		openForm(id) {
		  this.$refs["formRef"].open(id);
		},
		/** 删除按钮操作 */
		async handleDelete(row) {
		  const id = row.id;
		  await this.$modal.confirm('是否确认删除团队订单编号为"' + id + '"的数据项?')
		  try {
		   await OrdeApi.deleteOrde(id);
		   await this.getList();
		   this.$modal.msgSuccess("删除成功");
		  } catch {}
		},
	    /** 重置按钮操作 */
	    resetQuery() {
	      this.resetForm("queryForm");
	      this.handleQuery();
	    },
	  }
	}  
</script>

<style>
</style>